<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title th:text="'你好'">Insert title here</title>

<link th:href="@{/css/modern.css}" rel="stylesheet"/>
<link th:href="@{/css/modern-responsive.css}" rel="stylesheet"/>
<link th:href="@{/css/base.css}" rel="stylesheet"/>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.mousewheel.js}"></script>
<script type="text/javascript" th:src="@{/js/dropdown.js}"></script>
<script type="text/javascript" th:src="@{/js/input-control.js}"></script>
<script type="text/javascript" th:src="@{/js/tile-slider.js}"></script>
<script type="text/javascript" th:src="@{/js/base.js}"></script>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var username_null_tip = /*[[#{username_null_tip}]]*/ 'kkkkkkk',
	username_regexp_tip = /*[[#{username_regexp_tip}]]*/ 'kkkkkkk',
	password_null_tip = /*[[#{password_null_tip}]]*/ 'kkkkkkk',
	unexcepted_error_tip = /*[[#{unexcepted_error_tip}]]*/ 'kkkkkkk',
	login_failed_tip = /*[[#{login_failed_tip}]]*/ 'kkkkkkk';
$(function(){
	$('#btn-login').click(function(){
		$('.fg-color-red').hide();
		var username=$('#username').val();
		if (username == '') {
			$('#username_tip').html(username_null_tip).show();
			return;
		}
		if (!/^[a-zA-z_]\w*$/.test(username)) {
			$('#username_tip').html(username_regexp_tip).show();
			return;
		}
		var password = $('#password').val();
		if (password == '') {
			$('#password_tip').html(password_null_tip).show();
			return;
		}
		
		$.ajax({
			url: /*[[@{/login}]]*/'./login'
			, type: 'POST'
			, data: {
				username: username
				, password: password
				, rememberMe: $('#rememberMe').val()
			}
			, dataType: 'json'
			, error: function(jqXHR, textStatus, errorThrown){
				alert(unexcepted_error_tip);
			}
			, success: function(data, textStatus, jqXHR){
				if(data && data.result == 1){
					location.href = /*[[@{/}]]*/'./';
				}
				$('#msg-text').html(login_failed_tip).parent().parent().slideDown(300);
			}
		});
		
	});
	$('.notices').find('.close').click(function(){
		$(this).parent().parent().slideUp(500);
	});
});
/*]]>*/
</script>
</head>
<body>
<header th:substituteby="common/template::header">
</header>
<div class="span12 align-center">
	<div class="grid">
		<div class="row">
			<div class="span8">
				<fieldset>
					<legend th:text="#{user_login}">用户注册</legend>
					<div class="grid">
						<div class="row">
							<div class="notices no-display">
						        <div class="bg-color-red">
						            <a href="#" class="close"></a>
						            <div class="notice-icon"> <i class="icon-locked-2" style="color: white;"></i> </div>
						            <div class="notice-image"> <i class="icon-warning" style="font-size: 48pt; color: white;"></i> </div>
						            <div id="msg-header" class="notice-header fg-color-yellow" th:text="#{login_failed}">登录失败</div>
						            <div id="msg-text" class="notice-text"></div>
						        </div>
						    </div>
						</div>
						<div class="row">
							<label for="username" class="span2 text-right" th:text="#{username}">用户名</label>
							<div class="input-control text span3">
						        <input type="text" id="username" th:placeholder="#{placeholder_username}" tabindex="1"/>
						        <button class="helper"></button>
						    </div>
						    <div id="username_tip" class="span2 no-display fg-color-red">
						    	
						    </div>
						</div>
						<div class="row">
							<label for="password" class="span2 text-right" th:text="#{password}">密码</label>
							<div class="input-control text span3">
						        <input id="password" type="password" th:placeholder="#{placeholder_password}" tabindex="2"/>
						        <button class="helper"></button>
						    </div>
						    <div id="password_tip" class="span2 no-display fg-color-red">
						    	
						    </div>
						</div>
						<div class="row">
							<label class="input-control checkbox span2 offset2">
						        <input type="checkbox" id="rememberMe" tabindex="3"/>
						        <span class="helper" th:text="#{remember_me}">记住我</span>
						    </label>
						    <a href="#" th:text="#{forget_password}">忘记密码?</a>
						</div>
						<div class="row">
							<button id="btn-login" class="big offset2 span3 bg-color-yellow" th:text="#{btn_login_now}" tabindex="4"> 立 即 登 录 </button>
						</div>
					</div>
				</fieldset>
			</div>
			<div class="span4">
				<fieldset>
					<legend th:text="#{not_registered}">还未注册?</legend>
					<div class="grid">
						<div class="row">
							<a href="register.html" th:href="@{/register.html}" style="margin-left: 25px;" class="big button span3 bg-color-green" th:text="#{register_info}" tabindex="5">立即注册</a>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
	</div>
</div>
<div th:substituteby="common/template::page-settings">
</div>
</body>
</html>